<template>
  <div class="home">
    <div>
      <button @click="clock">{{text}}</button>
      <br>
      所在城市：<select v-model="obj.address" :disabled="disabled">
        <option v-for="item in add" :key="item.id" :value="item.title">{{item.title}}</option>
      </select>
      <br>
      用户名： <input type="text" :disabled="disabled" v-model="obj.name">
      <br>
      年龄： <input type="number" min="0" :disabled="disabled" v-model="obj.age">
      <br>
      <button @click="addData" :disabled="disabled">提交</button>
    </div>
    
    <div>
      <table border="1" cellspacing="0" cellpadding="0">
        <thead>
          <th></th>
          <th>Id</th>
          <th>姓名</th>
          <th>城市</th>
          <th>年龄</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, i) in tableData" :key="item.id">
            <td><input :disabled="disabled" type="checkbox" v-model="item.check"></td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.address}}</td>
            <td>
              <button :disabled="disabled" @click="exit(item, i)">修改</button><button :disabled="disabled" @click="del(i)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <button @click="delChecked" :disabled="disabled">删除所选</button>
    </div>
  </div>
</template>

<script>
var id = 0 
var timer
export default {
  name: 'Home',
  data() {
    return {
      disabled: false,
      text: '锁定',
      add: [
        {
          title: '请选择城市',
          id: null
        },
        {
          title: '北京',
          id: 1
        },
        {
          title: '上海',
          id: 2
        },
        {
          title: '广州',
          id: 3
        },
        {
          title: '成都',
          id: 4
        }
      ],
      obj: {
        address: '请选择城市',
        name: '',
        age: '',
        id: '',
        check: false
      },
      tableData: [],
      ind: null
    }
  },
  created() {
    if(localStorage.getItem('tableData')) {
      this.tableData = JSON.parse(localStorage.getItem('tableData'))
    }
  },
  methods: {
    addData() {
      if(this.ind === null) {
        id++
        this.obj.id = id
        let obj = Object.assign({}, this.obj)
        this.tableData.push(obj)
        this.obj = {
          address: '请选择城市',
          name: '',
          age: '',
          id: '',
          check: false
        }
      } else {
        for(let key in this.obj) {
          this.tableData[this.ind][key] = this.obj[key]
        }
      }
      
    },

    del(i) {
      this.tableData.splice(i, 1)
       
    },

    delChecked() {
      this.tableData = this.tableData.filter(item => {
        return !item.check
      })
    },

    clock() {
      clearInterval(timer)
      if(!this.disabled) {
        this.disabled = true
        this.text = '解锁'
      } else {
        var time = 3
        this.text = '3秒后解锁'
        timer = setInterval(() => {
          if(time > 0) {
            time--
            this.text = time + '秒后解锁'
          } else {
            this.text = '锁定'
            this.disabled = false
          }
          
        }, 1000);
      }
    },

    exit(item, i) {
      this.obj = Object.assign({}, item)
      this.ind = i
    }
  },

  watch: {
    tableData: {
      deep:true,
      handler(val) {
        localStorage.setItem('tableData', JSON.stringify(val))
      }
    }
  }
}
</script>
<style>
  table {
    border-collapse: collapse
  }
  th {
    padding: 5px 20px;
  }
  td {
    text-align: left;
  }
</style>
